<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix" style="text-align: center">
            <span>我的通知</span>
          </div>
          <el-table
            :data="tableData"
            border
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%"
          >
            <el-table-column align="center" prop="n_id" sortable label="序列号">
            </el-table-column>
            <el-table-column align="center" label="主题">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.title }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="阅读状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isRead"
                  disabled
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column align="center" min-width="130" label="通知时间">
              <template slot-scope="scope">{{
                conversionTime(scope.row.createtime)
              }}</template>
            </el-table-column>

            <el-table-column align="center" min-width="130" label="阅读时间">
              <template slot-scope="scope">{{
                scope.row.isRead ? conversionTime(scope.row.readtime) : ''
              }}</template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  style="padding: 3px 0"
                  type="text"
                  @click="checkNotice(scope.$index, scope.row)"
                >
                  查看通知
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.dialogVisible"
      width="30%"
    >
      <span>{{ dialog.content }}</span>
      <span v-if="!dialog.isRead" slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="haveRead">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
      show: true,
      tableData: [],
      dialog: {
        dialogVisible: false,
        title: '',
        content: '',
      }
    }
  },
  created () {
    this.getMyNotice();
  },

  methods: {
    successToast (message) {
      this.$message({
        message: message,
        type: 'success'
      });
    },

    conversionTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    /**
     * 已读与未读转换
     * @param index
     * @param row
     */
    checkNotice (index, row) {
      this.dialog.dialogVisible = !this.dialog.dialogVisible
      this.dialog.title = row.title
      this.dialog.content = row.content
      this.dialog.n_id = row.n_id
      this.dialog.isRead = row.isRead

    },

    async haveRead () {

      await this.$Axios.get('student/goyidu', {
        params: {
          n_id: this.dialog.n_id
        }
      })
      this.dialog.dialogVisible = false
      this.getnew()
    },


    /**
     * 我的通知分页获取数据与数量
     * */
    async getMyNotice () {
      const { data: result } = await this.$Axios.get('student/getNotice')
      this.tableData = result.data;
      result.data.forEach((v, i) => {
        v.isRead = false
      })
      this.getnew()

    },
    /**
     * 获取的我通知已读列表(供已读未读状态渲染)
     */
    async getnew () {
      const { data: result } = await this.$Axios.get('student/getNoticeRead')
      //判断是否已读未读
      result.forEach(((item, index) => {
        let val = item.n_id;
        this.tableData.forEach((value, index) => {

          if (val == value.n_id) {
            value.readtime = item.readtime
            value.isRead = true

          }
        })
      }))

    },


  },
}
</script>

<style scoped lang="scss">
</style>
